<!--
 * @Author: your name
 * @Date: 2021-07-15 17:18:21
 * @LastEditTime: 2021-07-21 19:46:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\taxManagement\detail\reportDetail.vue
-->
<template>
  <div>
    <a-tabs v-model="reportTabIndex">
      <a-tab-pane v-for="(tab, index) in reportTab" :key="index" :tab="tab"></a-tab-pane>
    </a-tabs>
    <bill v-if="reportTabIndex==0" type="zhsdsb" :statisticsList="statisticsList" :columns="columns" :dataSource="dataSource" :page="searchState.page" :pageSize="searchState.size" :total="searchState.total" @sizeChange="onSizeChange" @pageChange="onPageChange">
      <a-row type="flex" justify="space-between" slot="search" style="height:34px; margin-bottom: 24px">
        <a-radio-group v-model="searchState.todoStatus">
          <span>状态：</span>
          <a-radio-button v-for="(item,index) in todoStatusTypeList" :key="index" :value="index">{{ item.value }} </a-radio-button>
        </a-radio-group>
        <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 24px">
          <a-form-model-item label="项目">
            <a-select show-search :filter-option="false" style="width: 150px" v-model="searchState.projectId" placeholder="请输入项目名称" @search="onSearchProject" @change="onChangeProject" allow-clear>
              <a-select-option v-for="item in project" :key="item.projectId">{{ item.projectName }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="onSearch">
              <a-icon type="search" />
              查询
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-row>
    </bill>
    <div v-else>
      <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
        <a-form-model-item label="关键字">
          <a-input v-model="formState.keyword" style="width:245px" placeholder="请输入姓名/身份证号/手机号" allow-clear>
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="项目">
          <a-select show-search :filter-option="false" style="width: 150px" v-model="formState.projectId" placeholder="请输入项目名称" @search="onSearchProject" @change="onChangeProject" allow-clear>
            <a-select-option v-for="item in project" :key="item.projectId">{{ item.projectName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="异常">
          <a-select v-model="formState.sendStatus" style="width: 150px" placeholder="请选择异常状态" allow-clear>
            <a-select-option :value="key" v-for="(value, key) in errorType" :key="key">{{ value }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-space :size="8">
            <a-button type="primary" @click="onSearchDetail">
              <a-icon type="search" />
              查询
            </a-button>
          </a-space>
        </a-form-model-item>
      </a-form-model>
      <a-table rowKey="id" :columns="detailColumns" :data-source="detailDataSource" :scroll="{ x: true }" :pagination="{
                            current: formState.pageNum,
                            pageSize: formState.pageSize,
                            total: formState.total,
                            onChange: onPageChangeDetail,
                            onShowSizeChange: onSizeChangeDetail,
                        }" style="background: #fff">
        <a-badge slot="status" slot-scope="text" v-if="text" :color="text==1? 'gray' : text==2? 'blue' :'red'" :text="text==1? '待导入' : text==2? '算税中' : text==3?'待锁定':text==4?'待填报':text==5?'申报中':text==6?'已申报':text==7?'缴纳中':text==8?'已缴纳':''" />
        <a-badge slot="isError" slot-scope="text" v-if="text" :color="text==1? 'green' :'red'" :text="text==1? '正常'  :'异常'" />
      </a-table>
    </div>
  </div>
</template>
  
<script>
import bill from '@/pages/components/bill';
import { getProjectSelectList } from '@/services/todo.js';
export default {
  name: "reportDetail",
  components: { bill },
  props: {
    detailDrawer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formState: {
        keyword: '', // 姓名/身份证/手机号
        projectId: undefined, // 项目ID
        sendStatus: undefined,// 异常状态
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      searchState: {
        page: 1,
        size: 10,
        total: 0,
        projectId: undefined, // 项目ID
        todoStatus: 0
      },
      statisticsList: [
        {
          txt: "已锁定项目",
          value: "8"
        },
        {
          txt: "试算人数",
          value: "10"
        },
        {
          txt: "试算金额",
          value: "1000"
        },
        {
          txt: "申报人数",
          value: "146"
        },
        {
          txt: "实缴税款金额",
          value: "1010"
        },
        {
          txt: "上月预收实缴差额",
          value: "500"
        }
      ],
      columns: [
        {
          title: '项目',
          dataIndex: 'deptName',
        },
        {
          title: '关联待办',
          dataIndex: 'name',
        },
        {
          title: '待办状态',
          dataIndex: 'todoStatus',
          scopedSlots: { customRender: 'todoStatus' },
        },
        {
          title: '项目负责人',
          dataIndex: 'insuredPlace',
        },
        {
          title: '试算人数',
          dataIndex: 'paymentCityName',
        },
        {
          title: '试算金额',
          dataIndex: 'entryDate',
        },
        {
          title: '申报人数',
          dataIndex: 'sbrs',
        },
        {
          title: '实缴金额',
          dataIndex: 'sjje',
        },
      ],
      dataSource: [{}, {}],
      reportTabIndex: 0,
      project: [],
      reportTab: ["项目汇总", "明细"],
      errorType: ["正常", "异常", "全部"],
      todoStatusTypeList: [
        {
          value: "待处理",
          key: "ybs"
        },
        {
          value: "已锁定",
          key: "fzc"
        }
      ],
      detailColumns: [
        {
          title: '税款所属月',
          dataIndex: 'deptName',
        },
        {
          title: '纳税主体',
          dataIndex: 'name',
        },
        {
          title: '姓名',
          dataIndex: 'idCard',
        },
        {
          title: '身份证号',
          dataIndex: 'insuredPlace',
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '是否异常',
          dataIndex: 'isError',
          scopedSlots: { customRender: 'isError' },
        },
        {
          title: '具体异常',
          dataIndex: 'sbrs',
        }
      ],
      detailDataSource: [{}, {}]
    }
  },
  methods: {
    onClose () {
      this.$emit("closeDrawer")
    },
    onSizeChange (data) {
      console.log(data);
      this.searchState.page = 1;
      this.searchState.size = data.size;
    },
    onPageChange (data) {
      console.log(data);
      this.searchState.page = data.page;
      this.searchState.size = data.pageSize;
    },
    onSearch () {
      console.log(this.searchState);
    },
    onSearchDetail () {
      console.log(this.formState);
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChangeDetail (page, pageSize) {
      this.formState.pageNum = page;
      this.formState.pageSize = pageSize;
    },
    onSizeChangeDetail (current, size) {
      this.formState.pageNum = 1;
      this.formState.pageSize = size;
    },
    /**
     * @description: 项目下拉列表
     * @param {*}
     * @return {*}
     */
    getProjectSelectList (params) {
      getProjectSelectList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.project = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSearchProject (value) {
      if (value.length >= 2) {
        this.getProjectSelectList({ projectName: value });
      }
    },
    onChangeProject (val) {
      this.formState.projectId = val;
    },
  }
}
</script>
  
<style>
</style>
